import React, { Component } from 'react';
import { Modal, Form, Input } from 'antd';
import styles from './UserModal.css';

const FormItem = Form.Item;

class UserEditModal extends Component {

  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = (e) => {
    e?e.preventDefault():void(0);
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        this.hideModelHandler();
      }
    });
  };

  render() {
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { name, email, website } = this.props.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    return (
      <span>
        <span onClick={this.showModelHandler}>
        { children }
         </span>
         <Modal
           title="Edit User"
           visible={this.state.visible}
           onOk={this.okHandler}
           onCancel={this.hideModelHandler}
         >
           <Form horizontal onSubmit={this.okHandler}>
             <FormItem
               {...formItemLayout}
               label="Name"
             >
               {
                 getFieldDecorator('name', {
                   initialValue: name,
                 })(<Input />)
               }
             </FormItem>
             <FormItem
               {...formItemLayout}
               label="Email"
             >
               {
                 getFieldDecorator('email', {
                   initialValue: email,
                 })(<Input />)
               }
             </FormItem>
             <FormItem
               {...formItemLayout}
               label="Website"
             >
               {
                 getFieldDecorator('website', {
                   initialValue: website,
                 })(<Input />)
               }
             </FormItem>
           </Form>
         </Modal>
       </span>
     );
   }
 }
 
 export default Form.create()(UserEditModal);